import { graphql } from 'gatsby';

import Callout from '../../components/Callout';
import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import AdditionalContent from '../../examples/Alert/AdditionalContent';
import Basic from '../../examples/Alert/Basic';
import Dismissible from '../../examples/Alert/Dismissible';
import DismissibleControlled from '../../examples/Alert/DismissibleControlled';
import Link from '../../examples/Alert/Link';

# Alerts

<p className="lead">
  Provide contextual feedback messages for typical user actions with the handful
  of available and flexible alert messages.
</p>

## Examples

Alerts are available for any length of text, as well as an optional
dismiss button. For proper styling, use one of the eight `variant`s.

<ReactPlayground codeText={Basic} />

<Callout title="Conveying meaning to assistive technologies">
  Using color to add meaning only provides a visual indication, which will not
  be conveyed to users of assistive technologies – such as screen readers.
  Ensure that information denoted by the color is either obvious from the content
  itself (e.g. the visible text), or is included through alternative means,
  such as additional text hidden with the <code>.sr-only</code> class.
</Callout>

### Links

For links, use the `<Alert.Link>` component to provide matching
colored links within any alert.

<ReactPlayground codeText={Link} />

### Additional content

Alerts can contain whatever content you like. Headers, paragraphs, dividers, go crazy.

<ReactPlayground codeText={AdditionalContent} />

### Dismissing

Add the `dismissible` prop to add a functioning dismiss
button to the Alert.

<ReactPlayground codeText={Dismissible} />

You can also control the visual state directly which is great if you
want to build more complicated alerts.

<ReactPlayground codeText={DismissibleControlled} />

## API

<ComponentApi metadata={props.data.Alert} />
<ComponentApi metadata={props.data.AlertHeading} exportedBy={props.data.Alert} />
<ComponentApi metadata={props.data.AlertLink} exportedBy={props.data.Alert} />

export const query = graphql`
  query AlertQuery {
    Alert: componentMetadata(displayName: { eq: "Alert" }) {
      ...ComponentApi_metadata
    }
    AlertLink: componentMetadata(displayName: { eq: "AlertLink" }) {
      ...ComponentApi_metadata
    }
    AlertHeading: componentMetadata(displayName: { eq: "AlertHeading" }) {
      ...ComponentApi_metadata
    }
  }
`;
